<template>
  <div class="changePay">
    <span class="close" @click="logout">
      <i class="iconfont icon-tuichudenglu"></i>退出
    </span>
    <div class="title flex flex-align-center">
      <span>商户排名&nbsp;</span>
      <b>&nbsp;交易时间：</b>
      <el-date-picker
        v-model="form.startTime"
        type="datetime"
        default-time="00:00:00"
        placeholder="起始时间"
      ></el-date-picker>
      <b>&nbsp;至&nbsp;</b>
      <el-date-picker
        v-model="form.endTime"
        type="datetime"
        default-time="23:59:59"
        placeholder="结束时间"
      ></el-date-picker>
      <div class="search">
        <el-autocomplete
          v-model="nowSelStoreName"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入商户名"
          @select="handleSelect"
        ></el-autocomplete>
        <button @click="search">查询</button>
        <button @click="reset" style="background:#ccc;">重置</button>
      </div>
    </div>
    <div class="table_box">
      <table class="titleTable">
        <tr>
          <th style="width:10%;">序号</th>
          <th style="width:15%;">商户名称</th>
          <th style="width:15%;">线上交易额</th>
          <th style="width:15%;">交易净额</th>
          <th style="width:15%;">交易笔数</th>
        </tr>
      </table>
      <div id="myStoreCon" class="scroll_box">
        <table class="conTable">
          <tr v-for="(item,ind) in billList" :key="ind">
            <td style="width:10%;">{{ind+1}}</td>
            <td style="width:15%;">{{item.storeName}}</td>
            <td style="width:15%;">{{item.onLineAmount.toFixed(2)}}</td>
            <td style="width:15%;">{{item.amount}}</td>
            <td style="width:15%;">{{item.count}}</td>
          </tr>
        </table>
      </div>
    </div>
    <!-- <div class="pager flex flex-align-center" id="pager">
      <div class="pagerCon clearfix">
        <div class="pagerBtnBox right">
          <div class="pagerBtn">
            <span
              class="prev flex flex-align-center flex-pack-center left"
              :class="{havePage:curPage>1}"
            >
              <i class="el-icon-arrow-left" @click="curPageFn(2)"></i>
            </span>
            <span class="curPageNumber flex flex-align-center flex-pack-center left">{{curPage}}</span>
            <span
              class="next flex flex-align-center flex-pack-center left"
              :class="{havePage:curPage<sotreInfo.totalPages}"
            >
              <i class="el-icon-arrow-right" @click="curPageFn(1)"></i>
            </span>
          </div>
        </div>
        <div
          class="curPage flex flex-align-center right"
          v-text="'第'+curPage+'/'+(sotreInfo.totalPages)+'页'"
        ></div>
        <div
          class="totalPage flex flex-align-center right"
          v-text="'共' +sotreInfo.totalElements+ '条'"
        ></div>
      </div>
    </div>-->
  </div>
</template>

<script>
import { BASE_URL_API, BASE_URL } from "./../../urlConfig";
export default {
  data() {
    return {
      billList: [],
      nowSelStoreName: "",
      form: {
        startTime: "",
        endTime: "",
        nowSelStoreId: ""
      },
      startEnabled: false,
      mchId: "",
      mchKey: "",
      signAgentno: "",
      terminalId: "",
      accessToken: "",
      seledChannelVal: "",
      channelType: {
        HUI_SHANG: "汇商",
        JL: "嘉联",
        SAO_BEI: "扫呗",
        SUI_XIN_FU: "随心付"
      },
      channelTypeArr: [
        { channelName: "汇商", channelVal: "HUI_SHANG" },
        { channelName: "随心付", channelVal: "SUI_XIN_FU" },
        { channelName: "嘉联", channelVal: "JL" },
        { channelName: "扫呗", channelVal: "SAO_BEI" }
      ],
      storeName: "",
      curSelItem: {}, //当前选择店铺
      showUpdate: false,
      expireTime: new Date().Format("yyyy-MM-dd hh:mm:ss"),
      storeArr: [],
      sotreInfo: {
        totalPages: 1,
        totalElements: 0
      },
      curPage: 1, //当前页
      curSize: 10, //每页条数
      phone: "",
      options: [
        {
          value: "ONE",
          label: "一级"
        },
        {
          value: "TWO",
          label: "二级"
        },
        {
          value: "THREE",
          label: "三级"
        }
      ],
      level: {
        ONE: "一级",
        TWO: "二级",
        THREE: "三级"
      },
      levelValue: "ONE" //等级
    };
  },
  watch: {
    nowSelStoreName: function(val) {
      if (val == "") {
        this.$set(this.form, "nowSelStoreId", "");
      }
    }
  },
  methods: {
    handleSelect(item) {
      this.$set(this.form, "nowSelStoreId", item.id);
    },
    async querySearchAsync(queryString, cb) {
      let resData;
      await this.$http({
        url: BASE_URL + "v1/team/find-store",
        method: "GET",
        params: {
          name: queryString
        }
      }).then(res => {
        console.log(res);
        for (let i = 0; i < res.data.length; i++) {
          res.data[i].value = res.data[i].name;
        }
        resData = res.data;
      });
      cb(resData);
    },
    reset() {
      this.$set(this.form, "startTime", "");
      this.$set(this.form, "endTime", "");
      this.storeName = "";
    },
    search() {
      if (!this.form.startTime || !this.form.endTime) {
        this.$message({
          type: "error",
          message: "请选择时间"
        });
        return;
      }
      this.$http({
        url: BASE_URL + "v1/call/get-bill",
        method: "GET",
        params: {
          start: new Date(this.form.startTime).Format("yyyy-MM-dd hh:mm:ss"),
          end: new Date(this.form.endTime).Format("yyyy-MM-dd hh:mm:ss"),
          storeId: this.form.nowSelStoreId
        }
      }).then(res => {
        this.billList = res.data;
      });
    },
    doShowUpdate(item) {
      this.curSelItem = item;
      this.showUpdate = true;
      this.seledChannelVal = item.channel;
      this.mchId = item.mchId ? item.mchId : "";
      this.mchKey = item.mchKey ? item.mchKey : "";
      this.signAgentno = item.signAgentno ? item.signAgentno : "";
      this.terminalId = item.terminalId ? item.terminalId : "";
      this.accessToken = item.accessToken ? item.accessToken : "";
      this.startEnabled = item.startEnabled ? item.startEnabled : false;
    },
    updateStore() {
      // let expTime = new Date(this.expireTime).Format("yyyy-MM-dd hh:mm:ss");
      if (this.mchId == "" || String(this.mchId).trim() == "") {
        this.$message({
          message: "请完整填写信息",
          type: "error"
        });
        return;
      }
      let data = {
        id: this.curSelItem.id,
        storeId: this.curSelItem.storeId,
        channel: this.seledChannelVal,
        mchId: this.mchId,
        startEnabled: this.startEnabled
      };
      if (this.seledChannelVal == "HUI_SHANG") {
        if (this.mchKey == "" || String(this.mchKey).trim() == "") {
          this.$message({
            message: "请完整填写信息",
            type: "error"
          });
          return;
        }
        data = Object.assign(data, {
          mchKey: String(this.mchKey).trim()
        });
      } else if (this.seledChannelVal == "JL") {
        //
      } else if (this.seledChannelVal == "SAO_BEI") {
        if (
          this.terminalId == "" ||
          String(this.terminalId).trim() == "" ||
          this.accessToken == "" ||
          String(this.accessToken).trim() == ""
        ) {
          this.$message({
            message: "请完整填写信息",
            type: "error"
          });
          return;
        }
        data = Object.assign(data, {
          terminalId: String(this.terminalId).trim(),
          accessToken: String(this.accessToken).trim()
        });
      }
      this.$http({
        url: BASE_URL + "v1/call/store-pay-merge",
        method: "POST",
        data
      }).then(res => {
        if (res.status == 200) {
          this.$message({
            message: res.data,
            type: "success"
          });
          this.showUpdate = false;
          if (!this.storeName) {
            this.getStoreList();
          } else {
            this.search();
          }
        } else {
          this.$message({
            message: res.data.msg,
            type: "error"
          });
        }
      });
    },
    logout() {
      localStorage.clear();
      sessionStorage.clear();
      this.$router.replace("/login");
    },
    // 获取店铺列表
    getStoreList: function() {
      this.storeArr = [];
      this.$http({
        url: BASE_URL + "v1/call/store-pay",
        // url:BASE_URL+"code/store-pay",
        method: "GET",
        params: {
          // userName:this.phone,
          page: this.curPage - 1,
          size: this.curSize
        }
      })
        .then(res => {
          this.sotreInfo.totalPages = res.data.totalPages;
          this.sotreInfo.totalElements = res.data.totalElements;
          this.storeArr = res.data.content;
          // for(let i = 0,len = this.storeArr.length;i<len;i++){
          //     //修改tz时间格式，并加8小时
          //     // this.storeArr[i].expireTime = this.storeArr[i].expireTime?new Date(new Date(this.storeArr[i].expireTime).getTime()+8*3600*1000).toISOString().replace(/T/g, '-').replace(/\.[\d]{3}Z/, ''):'-'
          //     this.storeArr[i].expireTime = this.storeArr[i].expireTime?new Date(this.storeArr[i].expireTime).Format("yyyy-MM-dd hh:mm:ss"):"-";
          // }
        })
        .catch(err => {});
    },
    //切换页码
    curPageFn(foo) {
      if (this.sotreInfo.totalPages <= 1) {
        return;
      }
      if (foo == 2) {
        if (this.curPage == 1) {
          return;
        }
        this.curPage--;
      } else if (foo == 1) {
        if (this.curPage == this.sotreInfo.totalPages) {
          return;
        }
        this.curPage++;
      }
      console.log(this.curPage);
      this.getStoreList();
    }
  },
  created: function() {
    this.phone = sessionStorage.getItem("phone");
    this.getStoreList();
  },
  mounted() {
    $(document).ready(() => {
      if ($(document).width() <= 768) {
        // this.$createScroll('myStoreCon');
      }
    });
    let lastDay = new Date();
    lastDay.setTime(lastDay.getTime() - 24 * 60 * 60 * 1000);
    this.$set(this.form, "startTime", new Date(lastDay).Format("yyyy/MM/dd"));
    this.$set(
      this.form,
      "endTime",
      new Date(lastDay).Format("yyyy/MM/dd 23:59:59")
    );
  }
};
</script>
<style lang="scss" scoped>
@import "./bnsRank.scss";
</style>
